<template>
	<div>
		<!-- 父评论 -->
		<div class="Comment_item">
			<!-- 二级结构开始 -->
				<!-- 点回复——reply——reply带上参数触发组件标签身上的parentReply——因此组件身上要有parentReply属性 -->
				<CommentItem v-if="parent.parent" :parent="parent.parent" @parentReply="reply"></CommentItem>
			<!-- 二级结构结束 -->
			
			<!-- 评论头部 -->
			<div class="item_header">
				<span>{{parent.user.nickname}}</span>
				<span class="item_date">{{parent.create_date | formatDate}}</span>
				<span @click="reply(parent)">回复</span>
			</div>
			<div class="item_content">
				{{parent.content}}
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		/* 组件递归名 */
		name: 'CommentItem',
		props: {
			parent: Object
		},
		data (){
			return {
				RED: false
			}
		},
		
		methods: {
			
			reply(parent){
				this.$emit('parentReply' , parent);
			}
		}
			
	}
</script>

<style lang="less" scoped>
	.Comment_item{
		border: 2px solid #999999;
		background-color: #ffffff;
		padding: 5px;
		margin: 10px 0;
		.item_header{
			display: flex;
			
			span{
				font-size: 11px;
				color: #777777;
			}
			
			.item_date{
				flex: 1;
				margin-left: 15px;
			}
		}
		
		.item_content{
			font-size: 15px;
			margin: 10px 0 5px 0;
			word-wrap: break-word;
			word-break: break-all;
		}
	}
</style>